<template>
	<view class="container">
		<!-- 左侧菜单 -->
		<scroll-view class="left-menu" scroll-y :scroll-top="leftScrollTop" :scroll-with-animation="true">
			<view v-for="(item, index) in menuList" :key="item._id" class="menu-item"
				:class="{ 'active': currentMenuIndex === index }" @click="handleMenuClick(index)">
				{{ item.name }}
			</view>
			<view class="empty-box"></view>

		</scroll-view>

		<!-- 右侧内容 -->
		<scroll-view class="right-content" scroll-y :scroll-top="rightScrollTop" @scroll="handleRightScroll">
			<view v-for="(item, index) in contentList" :key="item._id" class="content-item"
				:style="{backgroundColor:item.tag?'#fff':'#f9f9f9'}">
				<view class="item-box">
					<image :src="item.imageUrl" mode="aspectFill" @error="handleImageErr(item)" @click="showDish(item)"></image>
					<view class="details">
						<text class="name">{{item.name}}</text>
						<text class="desc">{{item.description?item.description:'介绍：'}}</text>
						<text class="desc">月销量：</text>
						<view class="price-box">
							<view>
								<text class="price-icon">￥</text>
								<text class="price">{{item.price}}</text>
							</view>
							<view class="button-box">
								<view class="button">
									<image v-if="item.number" src="../../static/minus2.svg" @click="onMinusHandler(item,-1)"></image>
									<text v-if="item.number">{{item.number}}</text>
									<image :src="item.more?'../../static/more1.svg':'../../static/plus1.svg'" @click="onAddHandler(item)">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="more">
				<text>没有更多了~~~</text>
			</view>
			<view class="empty-box"></view>
		</scroll-view>
		<view :class="['bottom-box',!cartPopupTitle? 'box-visible': 'box-hidden' ]">
			<view class="left-bottom-box">
				<view class="image" @click="onPlaceAnOrder">
					<uni-icons class="cart" type="cart" size="40" color="#888"></uni-icons>
				</view>
				<view class="tip">
					<view class="tip0">
						<text class="tip2">￥</text>
						<text class="tip1">预估</text>
					</view>
					<text class="amount">{{amount}}</text>
				</view>
				<text v-if="count" class="count">{{count}}</text>
			</view>
			<view class="right-bottom-box">
				<text class="button1" @click="onPlaceAnOrder">去下单</text>
				<text class="button2" @click="onOrdered">已下单</text>
				<text v-if="orderCount" class="tag">{{orderCount}}</text>
			</view>
		</view>
		<CartListItemVue ref="cartPopup" :turnoverId="turnoverId" :turnoverNumber="turnoverNumber" :orderIds="orderIds"
			:isPermitted="isPermitted" :cartList="cartList" :getListData="getCartPopupData"
			:changeCartPopup="changeCartPopup" />
		<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" style="z-index: 50;">
			<view class="popup">
				<view class="title-box">
					<text class="title">选择口味</text>
				</view>
				<!-- 内容区域 -->
				<view class="content1">
					<view class="seleced-flavor">
						<view v-for="flavor in flavorList" :key="flavor.dishName" class="dish-box">
							<view class="dish-name">{{ flavor.dishName }}</view>
							<FlavorItemVue :flavors="flavor.flavorList" :changeSeleced="changeSeleced" class="flavor-item" />
						</view>
					</view>
				</view>

				<!-- 确定按钮 -->
				<view class="popup-footer">
					<button class="btn-close" @click="popup.close()">取消</button>
					<button class="btn-add" @click="submitFlavor">确定</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="turnoverPopup" type="bottom" :is-mask-click="false" :safe-area="true">
			<view class="turnover">
				<text class="tip">提示：所有人都可以扫码点餐，选好后，只有提交人数的手机可以下单。</text>
				<view class="input-count">
					<text>请确定就餐人数：</text>
					<input v-model.number="people" placeholder="请输入人数" type="number" />
				</view>
				<view class="people-count">
					<text v-for="item in 12" class="count" :class="{'active':people===item}" @click="people=item"
						:key="item">{{item}}</text>
				</view>
				<view class="btn-box">
					<button class="turnover-btn" @click="submitTurnover">提交</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="showPopup" type="bottom" :mask-click="true" @maskClick="showClose" style="z-index: 30;"
			:safe-area="true">
			<view class="show-popup-content">
				<view class="scroll-box">
					<!-- 菜品图片 -->
					<image :src="dishData.imageUrl" mode="aspectFill" class="dish-image"></image>
					<!-- 菜品基本信息 -->
					<view class="dish-info">
						<text class="dish-name">{{ dishData.name }}</text>
						<text class="dish-price">¥{{ dishData.price }}</text>
						<text class="dish-category">{{ dishData.categoryName }}</text>
						<text class="dish-description">{{ dishData.description }}</text>
					</view>
					<!-- 如果有套餐内容，显示列表 -->
					<view v-if="dishData.setmealDishes && dishData.setmealDishes.length > 0" class="setmeal-list">
						<text class="setmeal-title">套餐内容：</text>
						<view v-for="(item, index) in dishData.setmealDishes" :key="index" class="setmeal-item">
							<text>{{ item.name }} × {{ item.copies }}</text>
						</view>
					</view>
					<!-- 口味列表（当 dishData.dishFlavors 存在且长度 > 0 时渲染） -->
					<view v-if="dishData.dishFlavors && dishData.dishFlavors.length > 0" class="flavor-list">
						<text class="flavor-title">已选口味：</text>
						<view v-for="(flavor, index) in dishData.dishFlavors" :key="index" class="flavor-item">
							<text>{{ flavor.dishFlavor }}</text>
							<text class="delete-icon" @click="onMinusHandler(dishData,index)">×</text>
						</view>
					</view>
				</view>
				<!-- 底部操作按钮 -->
				<view class="popup-footer">
					<button class="btn-close" @click="showClose">关闭</button>
					<button class="btn-add" @click="onAddHandler(dishData)">{{dishData.more?'选择口味':'加入购物车'}}</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import FlavorItemVue from '../../components/FlavorItem.vue';
	import CartListItemVue from '../../components/CartListItem.vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue';
	import {
		wxLogin
	} from '../../utiles/login';
	import {
		getUserOrderTurnoverIdApi,
		getUserShopStatusApi,
		getUserShoppingCartListApi,
		getUserUserTurnoverIdApi,
		postUserShoppingCartAddApi,
		postUserUserCreateTurnoverApi,
		putUserShoppingCartUpdateApi
	} from '../../api/user';
	import {
		callCloudFun
	} from '../../utiles/callCloudFun';

	const popup = ref(null)
	const place = ref(0)
	const turnoverId = ref('')
	let turnoverNumber = ''
	const people = ref(0)
	const isPermitted = ref(false)
	let isEmployee = false
	const orderCount = ref(0)
	const cartPopupTitle = ref("")
	// 左侧菜单数据
	const menuList = reactive([]);

	// 右侧内容数据
	const contentList = reactive([]);

	// 当前选中的菜单索引
	const currentMenuIndex = ref(0);

	// 左侧菜单滚动位置
	const leftScrollTop = ref(0);

	// 右侧内容滚动位置
	const rightScrollTop = ref(0);

	// 记录每个菜单项对应的右侧内容项的起始位置
	const menuItemPositions = reactive([0]);
	const turnoverPopup = ref(null)
	let userId = null

	onLoad(async params => {
		userId = wx.getStorageSync('userId')
		console.log('userId:', userId);
		if (!userId) {
			const res = await wxLogin()
			userId = res.id
		}
		place.value = parseInt(params.place)
		uni.setNavigationBarTitle({
			title: place.value + '号桌 点餐'
		})
		isEmployee = params.job === "服务员" || params.job === "管理员" || params.job === '收银员'
		if (!isEmployee) {
			console.log('删除userInfo');
			uni.removeStorageSync('userInfo')
		}
		console.log(JSON.stringify(uni.getStorageSync('userInfo') || {}))
		if (!place.value) {
			uni.showToast({
				title: '参数错误'
			})
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}
		await getData()
		const res = await getUserUserTurnoverIdApi(place.value)
		console.log('用桌号查询turnoverId:', res);
		if (!res || res.length === 0) {
			turnoverPopup.value.open()
		} else {
			turnoverId.value = res[0]
			turnoverNumber = res[2]
			wx.setStorageSync("turnoverId", turnoverId.value)
			isPermitted.value = userId === res[1] || isEmployee
			await getOrderData()
			await getShoppingCartData()
		}
	})

	const submitTurnover = async () => {
		if (people.value === 0) {
			uni.showToast({
				title: '请选择就餐人数',
				icon: 'error'
			})
			return
		}
		turnoverPopup.value.close()
		const res = await postUserUserCreateTurnoverApi({
			userId,
			place: place.value,
			people: people.value
		})
		turnoverId.value = res[0]
		turnoverNumber = res[2]
		wx.setStorageSync('turnoverId', turnoverId.value)
		isPermitted.value = res[1] === userId || isEmployee
		if (res[1] === userId) {
			await wx.showModal({
				title: '提示',
				content: '现在可以点菜了，其他人也可以扫码点餐，选好后要由您这台手机下单',
				showCancel: false,
				confirmText: '知道了'
			})
		} else {
			await uni.showModal({
				title: '提示',
				content: '有人已经在你之前提交了人数，请确认，如没有，请联系服务员',
				showCancel: false,
				confirmText: '知道了'
			})
		}
		await getShoppingCartData()
		await getOrderData()
	}

	const getData = async () => {
		const {
			categoryList,
			dishList,
			setmealList
		} = await callCloudFun('getDishList')
		menuList.splice(0, menuList.length, ...categoryList)

		contentList.splice(0, contentList.length)
		let tag = false

		menuList.forEach((item, index) => {
			let list = []
			if (item.type === 1) {
				list = dishList.filter(e => e.categoryId === item._id)
			} else {
				list = setmealList.filter(e => e.categoryId === item._id)
			}
			if (list.length > 0) {
				list.forEach(e => {
					e.type = item.type
					e.imageUrl = e.image
					e.categoryName = item.name
					if (item.type === 1) {
						e.more = e.flavors.length !== 0
					} else {
						e.more = e.setmealDishes.filter(x => dishList.find(y => x.dishId === y._id).flavors
							.length !== 0).length !== 0
					}
					e.tag = tag
				})
				tag = !tag
				contentList.push(...list)
			}
			// 初始化菜单项对应的右侧内容项的起始位置
			menuItemPositions[index + 1] = menuItemPositions[index] + list.length * 100
		})
		console.log("菜品contentList:", contentList);
	}

	const handleImageErr = async (item) => {
		const res = await wx.cloud.getTempFileURL({
			fileList: [item.image]
		})
		item.imageUrl = res.fileList[0].tempFileURL
		console.log('图片的临时访问地址：', item.imageUrl);
	}

	// 点击左侧菜单
	const handleMenuClick = (index) => {
		currentMenuIndex.value = index;
		rightScrollTop.value = menuItemPositions[index] + 1
	};

	// 监听右侧内容滚动
	const handleRightScroll = (event) => {
		const scrollTop = event.detail.scrollTop;

		// 根据 scrollTop 找到当前应该高亮的菜单项
		for (let i = menuItemPositions.length - 1; i >= 0; i--) {
			if (scrollTop >= menuItemPositions[i]) {
				currentMenuIndex.value = i;
				break;
			}
		}
	};

	const orderDetailList = ref([])
	const orderIds = ref([])

	const getOrderData = async () => {
		console.log('获取订单数据----');
		orderDetailList.value = []
		orderIds.value = []
		orderCount.value = 0
		const res = await getUserOrderTurnoverIdApi(turnoverId.value)
		if (!res || res.length === 0) {
			return
		}
		res.forEach(item => {
			orderIds.value.push(item._id)
			if (item.orderDetailList.length > 0) {
				orderDetailList.value.push(...item.orderDetailList)
			}
		})
		// orderDetailList.value = mergeOrder(orderDetailList.value)

		orderCount.value = orderDetailList.value.filter(item => item.name !== '餐具').reduce((acc, cur) => acc + cur
			.number, 0)
	}

	let shoppingCartList = reactive([])

	const count = computed(() => {
		return shoppingCartList.reduce((acc, cur) => acc + cur.number, 0)
	})
	const amount = computed(() => {
		return shoppingCartList.reduce((acc, cur) => acc + cur.number * cur.amount, 0)
	})

	const getShoppingCartData = async () => {
		const res = await getUserShoppingCartListApi(turnoverId.value)
		shoppingCartList.splice(0, shoppingCartList.length, ...res)
		contentList.forEach(item => {
			const list = shoppingCartList.filter(e => e.name === item.name)
			if (list.length === 0) {
				item.number = 0
			} else {
				item.number = list.reduce((acc, cur) => acc + cur.number, 0)
			}
		})
		console.log("购物车列表：", shoppingCartList);
	}

	const onMinusHandler = async (dish, index) => {
		let index1 = shoppingCartList.findIndex(item => item.name === dish.name)
		if (index1 === -1) {
			wx.showToast({
				title: '数据没找到，刷新后再试',
				icon: 'none'
			})
			return
		}
		if (index === -1) {
			if (dish.more && dish.number !== 1) {
				showDish(dish)
				return
			} else {
				await putUserShoppingCartUpdateApi({
					id: shoppingCartList[index1]._id,
					number: --shoppingCartList[index1].number
				})
			}
		} else {
			index1 = shoppingCartList.findIndex(item => item._id === dishData.value.dishFlavors[index]._id)
			await putUserShoppingCartUpdateApi({
				id: shoppingCartList[index1]._id,
				number: --shoppingCartList[index1].number
			})
			dishData.value.dishFlavors.splice(index, 1)
		}
		contentList.find(item => item.name === dish.name).number--
		if (shoppingCartList[index1].number === 0) {
			shoppingCartList.splice(index1, 1)
		}
	}

	const flavorList = ref([])
	let selecedData = {}
	let dishItem = {}

	const onAddHandler = async (item, dishFlavor = null) => {
		initPopupData()
		if (item.more && dishFlavor === null) {
			dishItem = item
			if (item.type === 1) {
				flavorList.value = [{
					dishName: item.name,
					flavorList: []
				}]
				item.flavors.forEach(e => {
					const flavorItem = {
						id: e._id,
						name: e.name,
						value: JSON.parse(e.value),
						dishId: e.dishId
					}
					flavorList.value[0].flavorList.push(flavorItem)
				})
			} else {
				item.setmealDishes.forEach(e => {
					const dish = contentList.find(x => e.dishId === x._id)
					if (dish.flavors.length) {
						const flavor = {
							dishName: dish.name,
							flavorList: []
						}
						dish.flavors.forEach(x => {
							const flavorItem = {
								id: x._id,
								name: x.name,
								value: JSON.parse(x.value),
								dishId: x.dishId
							}
							flavor.flavorList.push(flavorItem)
						})
						flavorList.value.push(flavor)
					}
				})
			}
			showPopup.value.close()
			popup.value.open()
			return
		}
		const addFormData = {
			turnoverId: turnoverId.value,
			userId,
			name: item.name,
			image: item.image,
			dishFlavor,
			number: 1,
			amount: item.price,
			selected: 1,
			categoryName: item.categoryName
		}
		if (item.type == 1) {
			addFormData.dishId = item._id
			addFormData.setmealId = null
		} else {
			addFormData.setmealId = item._id
			addFormData.dishId = null
		}
		await postUserShoppingCartAddApi(addFormData)
		getShoppingCartData()
	}

	const changeSeleced = (dishId, value) => {
		const name = contentList.find(item => item._id === dishId).name
		selecedData[name] = value.join(',')
	}

	// 选择口味的popup弹窗确定触发
	const submitFlavor = () => {
		let isOk = true
		const values = Object.values(selecedData)

		if (values.length !== flavorList.value.length) {
			uni.showToast({
				title: '有未选项，不能提交',
				icon: 'none'
			})
			return
		}
		for (const value of values) {
			if (!isOk) break
			const items = value.split(',')
			for (const item of items) {
				if (item === '') {
					uni.showToast({
						title: '有未选项，不能提交',
						icon: 'none'
					})
					isOk = false
					break
				}
			}
		}
		if (isOk) {
			let flavorData = ''
			if (values.length === 1) {
				flavorData = values[0]
			} else {
				for (let key in selecedData) {
					flavorData = flavorData + key + ':' + selecedData[key] + ' '
				}
			}
			onAddHandler(dishItem, flavorData)
			popup.value.close()
		}
	}

	const initPopupData = () => {
		dishItem = {}
		selecedData = {}
		flavorList.value = []
		// 	shoppingCartItem.value = {}
	}

	const cartPopup = ref(null)
	const cartList = ref([])
	const onPlaceAnOrder = () => {
		cartList.value = shoppingCartList
		cartPopupTitle.value = "待下单"
		cartPopup.value.open("待下单")
	}

	const onOrdered = () => {
		cartList.value = orderDetailList.value
		cartPopupTitle.value = "已下单"
		cartPopup.value.open("已下单")
	}

	const getCartPopupData = async (params = null) => {
		if (params === '下单成功') {
			cartPopup.value.close()
			getShoppingCartData()
			getOrderData()
			return
		}
		if (params === '有售罄') {
			await getData()
		}
		if (cartPopupTitle.value === "待下单") {
			await getShoppingCartData()
			cartList.value = shoppingCartList
		} else {
			await getOrderData()
			cartList.value = orderDetailList.value
		}
	}

	const changeCartPopup = (e) => {
		if (!e) {
			cartPopupTitle.value = ''
		}
	}

	const showPopup = ref(null)
	const dishData = ref({})
	const showDish = (item) => {
		dishData.value = {
			...item
		}
		dishData.value.dishFlavors = []
		shoppingCartList.forEach(item => {
			if (item.name === dishData.value.name) {
				if (item.dishFlavor) {
					for (let i = 0; i < item.number; i++) {
						dishData.value.dishFlavors.push({
							_id: item._id,
							dishFlavor: item.dishFlavor
						})
					}
				}
			}
		})
		showPopup.value.open()
	}

	const showClose = () => {
		showPopup.value.close()
	}
</script>

<style scoped lang="scss">
	.container {
		box-sizing: border-box;
		display: flex;
		height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);

		.empty-box {
			height: 60px;
		}

		.bottom-box {
			display: flex;
			flex-direction: row;
			justify-content: center;
			position: fixed;
			bottom: -100px;
			left: 0;
			right: 0;
			height: 60px;
			width: 100%;
			border-bottom: 1rpx solid #ddd;
			margin-bottom: env(safe-area-inset-bottom);
			background-color: #fff;
			box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

			.left-bottom-box,
			.right-bottom-box {
				display: flex;
				flex-direction: row;
				position: relative;

				.image {
					// margin-bottom: 5rpx;
					padding: 0 40rpx 20rpx;

					.cart {
						width: 65px;
						height: 65rpx;
					}
				}

			}

			.left-bottom-box {
				justify-content: left;
				align-items: flex-end;
				padding-left: 20rpx;
				width: 60%;

				.tip {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding-bottom: 16rpx;
					// background-color: #e0f7fa;

					.tip0 {
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						// margin-left: -10rpx;
						margin-bottom: 8rpx;

						.tip1 {
							font-size: 12px;
							color: #999;
							padding-right: 10rpx;

						}

						.tip2 {
							font-size: 14px;
							color: red;
							padding-left: 10rpx;
							padding-top: 20rpx;
							margin-bottom: -8rpx;
						}

					}

					.amount {
						font-size: 28px;
						color: red;
						line-height: 55px;
						text-align: center;
						margin-top: -10rpx;
					}
				}

				.count {
					position: absolute;
					left: 55px;
					top: 0;
					color: white;
					width: 20px;
					height: 20px;
					border-radius: 10px;
					text-align: center;
					background-color: red;
					font-size: 12px;
					line-height: 20px;
				}
			}

			.right-bottom-box {
				width: 40%;
				justify-content: flex-end;
				align-items: center;
				padding-right: 30rpx;
				position: relative;

				.tag {
					position: absolute;
					top: 0;
					right: 35rpx;
					color: white;
					width: 20px;
					height: 20px;
					border-radius: 10px;
					text-align: center;
					background-color: red;
					font-size: 12px;
					line-height: 20px;
				}

				.button1,
				.button2 {
					background-color: #ff5a5f;
					font-size: 32rpx;
					padding: 20rpx 0;
					width: 60px;
					color: #fff;
					text-align: center;
				}

				.button1 {
					padding-left: 25rpx;
					border-radius: 20px 0 0 20px;
					border-right: 1px solid rgba(0, 0, 0, 0.1);
				}

				.button2 {
					padding-right: 25rpx;
					border-radius: 0 20px 20px 0;
				}
			}
		}

		.box-visible {
			animation: slideUp 0.5s ease-in-out forwards;
		}

		.box-hidden {
			animation: slideDown 0.5s ease-in-out forwards;
		}

		@keyframes slideUp {
			from {
				transform: translateY(0);
			}

			to {
				transform: translateY(-100px);
			}
		}

		@keyframes slideDown {
			from {
				transform: translateY(-100px);
			}

			to {
				transform: translateY(0);
			}
		}

		.popup {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 90vw;
			max-height: 70vh;
			background-color: #fff;
			border-radius: 20rpx;


			.title-box {
				box-sizing: border-box;
				display: flex;
				width: 100%;
				justify-content: center;
				padding: 30rpx 0;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0 0;
				border-bottom: 1rpx solid #ddd;

				.title {
					font-size: 38rpx;
					font-weight: 600;
					color: #666;
				}
			}

			.content1 {
				flex: 1;
				width: 100%;
				overflow-y: auto;
				margin-top: 10px;

				.sele-flavors {
					display: flex;
					flex-direction: column;
					align-items: left;
					padding: 20rpx;
					margin-bottom: 20rpx;

					.title {
						margin: 30rpx 20rpx;
					}

					.sele-box {
						margin: 15rpx 0;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						gap: 10px;
						background-color: #fafafa;
						padding: 10rpx;
						border-radius: 10rpx;


						.option {
							margin: 20rpx 0;

							.flavor-option {
								padding: 8rpx 12rpx;
								margin: 10rpx 0;
								box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
								border-radius: 4px;
								background-color: #fffff9;
								border: 1rpx solid #eee;
							}

							.flavor-option--selected {
								background-color: #ff5a5f;
								color: white;
							}
						}
					}
				}

				.seleced-flavor {
					display: flex;
					flex-direction: column;
					align-items: left;
					// width: 650rpx;
					padding: 10px 0;
					border-radius: 20rpx;


					.dish-box {
						width: 100%;
						display: flex;
						flex-direction: column;
						margin-bottom: 20rpx;
						border-bottom: 1rpx solid #f5f5f5;

						&:last-child {
							border-bottom: none;
						}

						.dish-name {
							margin-left: 40rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #333;
						}

						.flavor-item {
							// 	width: 650rpx;
							padding: 10rpx 40rpx;
						}
					}
				}
			}
		}

		.turnover {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			justify-content: space-evenly;
			border-radius: 18rpx 18rpx 0 0;
			box-sizing: border-box;
			padding-top: 20rpx;

			.tip {
				font-size: 28rpx;
				color: #666;
				margin: 30rpx 30rpx;
			}

			.input-count {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 30rpx;

				text {
					font-size: 32rpx;
					color: #666;
					font-weight: 600;
					height: 100%;
				}

				input {
					border: 1px solid #ddd;
					border-radius: 6rpx;
					width: 60px;
					height: 35px;
					text-align: center;
					box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
				}
			}

			.people-count {
				display: flex;
				flex-direction: row;
				justify-content: space-evenly;
				flex-wrap: wrap;
				margin: 20rpx;

				.count {
					font-size: 32rpx;
					width: 70rpx;
					color: #666;
					background-color: #f8f8f8;
					margin: 10px;
					text-align: center;
					line-height: 60rpx;
					border-radius: 8rpx;
					box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
					border: 1rpx solid #ddd;
				}

				.active {
					background-color: #ff5a5f !important;
					color: #fff
				}
			}

			.btn-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 100%;
				height: 60px;
				border-top: 1rpx solid #ddd;
				margin-top: 40rpx;

				.turnover-btn {
					background-color: #ff5a5f;
					text-align: center;
					color: #fff;
					border-radius: 50rpx;
					// padding: 0 160rpx;
					width: 80%;
					margin: 0 auto;
					font-size: 30rpx;
				}
			}
		}
	}

	.left-menu {
		width: 200rpx;
		background-color: #f5f5f5;
	}

	.menu-item {
		padding: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
	}

	.menu-item.active {
		color: #1685a9;
		background-color: #e0f7fa;
	}

	.right-content {
		flex: 1;

		.content-item {
			box-sizing: border-box;
			padding: 10px;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #eee;

			.item-box {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: start;
				width: 100%;
				height: 100%;

				image {
					width: 80px;
					height: 80px;
					border-radius: 10rpx;
				}

				.details {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: left;
					height: 100%;
					width: 100%;
					padding: 0 10rpx;

					.name {
						font-size: 28rpx;
						font-weight: 700;
					}

					.desc {
						width: 290rpx;
						font-size: 22rpx;
						color: #939391;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.price-box {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: end;

						.price-icon {
							font-size: 20rpx;
							color: red;
						}

						.price {
							font-size: 28rpx;
							color: red;
						}

						.button-box {

							.button {
								width: 60px;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-end;

								image {
									width: 20px;
									height: 20px;
									background-color: #ff5a5f;
									border-radius: 50%;
								}

								text {
									font-size: 24rpx;
									width: 20px;
									text-align: center;
								}
							}
						}
					}
				}
			}
		}

		.more {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 30rpx;

			text {
				color: #808080;
				font-size: 28rpx;
			}
		}
	}

	.show-popup-content {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 30rpx;
		max-height: 80vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.scroll-box {
			padding: 0 30rpx;
			flex: 1;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			padding-bottom: 20rpx;

			.dish-image {
				width: 100%;
				height: 600rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
			}

			.dish-info {
				margin-bottom: 20rpx;

				.dish-name {
					font-size: 36rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 10rpx;
				}

				.dish-price {
					font-size: 32rpx;
					color: #ff5a5f;
					display: block;
					margin-bottom: 10rpx;
				}

				.dish-category,
				.dish-description {
					font-size: 28rpx;
					color: #666;
					display: block;
					margin-bottom: 10rpx;
				}
			}

			.setmeal-list {
				margin-top: 20rpx;
				border-top: 1rpx solid #eee;
				padding-top: 20rpx;

				.setmeal-title {
					font-size: 30rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 15rpx;
				}

				.setmeal-item {
					font-size: 28rpx;
					color: #555;
					margin-bottom: 10rpx;
				}
			}

			.flavor-list {
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 1rpx solid #f5f5f5;

				.flavor-title {
					font-size: 30rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 15rpx;
				}

				.flavor-item {
					display: flex;
					align-items: baseline;
					margin-bottom: 10rpx;
					font-size: 28rpx;
					color: #555;
					padding: 10rpx 0;

					.delete-icon {
						color: red;
						margin-left: 10rpx;
						font-size: 36rpx;
					}
				}
			}
		}
	}

	.popup-footer {
		flex-shrink: 0;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		padding: 30rpx;
		border-top: 1rpx solid #ddd;

		.btn-close,
		.btn-add {
			width: 45%;
			height: 80rpx;
			// line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
		}

		.btn-close {
			background: #f8f8f8;
			border: 1px solid #ddd;
			color: #333;
			border-radius: 40rpx;
			box-sizing: border-box;
		}

		.btn-add {
			background: #ff5a5f;
			color: #fff;
		}
	}
</style>